
import React from 'react'
import { StatusBar, View, Image, Text } from 'react-native'

import { createAppContainer } from 'react-navigation'
import { createStackNavigator, StackViewStyleInterpolator } from 'react-navigation-stack'

import {pages} from './Pages'

const navigator = createStackNavigator(
  pages,
  {
    initialRouteName: 'Root', // 默认显示界面
    transitionConfig: () => ({ // 修改页面跳转动画方向
      screenInterpolator: StackViewStyleInterpolator.forHorizontal,
    }),
    defaultNavigationOptions: {  // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
      headerBackImage: (
        <View style={{ width: 40, height: 30, flexDirection: 'row', alignItems: 'center' }}>
          <Image
            source={require('../assets/images/i_left_arrow_black.png')}
            style={{ width: 10, height: 17 }}
          />
          {/* <Text style={{ marginLeft: 3 }}>返回</Text> */}
        </View>
      ),
      headerTitleStyle: {
        alignItems: "center",
        flexDirection: 'row',
        fontSize: 17,
        color: '#333',
        marginBottom: 2,
        flex: 1,
        textAlign: 'center',
        paddingRight: 55,
      },
      headerStyle: {
        backgroundColor: '#fff',
        height: StatusBar.currentHeight + 44,
        paddingTop: StatusBar.currentHeight
      },
      cardStack: {
        gesturesEnabled: false
      }
    },
    mode: 'card',  // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
    onTransitionStart: () => { console.log('导航栏切换开始'); },  // 回调
    onTransitionEnd: () => { console.log('导航栏切换结束'); }  // 回调
  }
)

const Navigation = createAppContainer(navigator)

export default Navigation
